<template>
  <a-modal :visible="state.visible" :title="state.formData.userId ? '编辑员工' : '新增员工'" @cancel="handleCancel"
    @ok="handleOk">
    <AForm ref="formRef" :model="state.formData" :labelCol="{ style: 'width:80px' }">
      <AFormItem label="员工账号" name="userName" :rules="[
        { required: true, message: '必填' },
        { pattern: /^[a-zA-Z0-9_]{4,16}$/, message: '4到16位（字母，数字，下划线)' },
      ]">
        <AInput :disabled="!!state.formData.userId" v-model:value="state.formData.userName"></AInput>
      </AFormItem>
      <AFormItem label="员工姓名" name="nickName" :rules=" [{ required: true, message: '必填' }]">
        <AInput v-model:value="state.formData.nickName" :maxlength="50"></AInput>
      </AFormItem>
      <AFormItem label="员工简介" name="userIntro">
        <AInput v-model:value="state.formData.userIntro" show-count :maxlength="255"></AInput>
      </AFormItem>
      <AFormItem label="员工头像" name="avatar">
        <UploadImage v-model:value="state.formData.avatar"></UploadImage>
      </AFormItem>
      <AFormItem label="邮箱" name=" email">
        <AInput v-model:value="state.formData.email" :maxlength="255"></AInput>
      </AFormItem>
      <AFormItem label="手机号" name="phone" :rules="[
        { required: true, message: '必填' },
        { pattern: /^1[0-9]{10}$/, message: '手机号有误' },
      ]">
        <AInput v-model:value="state.formData.phone"></AInput>
      </AFormItem>
      <AFormItem label="所属门店" name="storeCode" :rules=" [{ required: true, message: '必填' }]">
        <ASelect v-model:value="state.formData.storeCode">
          <ASelectOption v-for="(item, index) in state.stores" :value="item.storeCode" :key="index">{{ item.storeName }}
          </ASelectOption>
        </ASelect>
      </AFormItem>
      <AFormItem label="员工角色" name="roleId" :rules="[
        { required: true, message: '必填' }
      ]">
        <ASelect v-model:value="state.formData.roleId">
          <ASelectOption v-for="(item, index) in state.roles" :value="item.id" :key="index">{{ item.name }}
          </ASelectOption>
        </ASelect>
      </AFormItem>
      <AFormItem label="员工状态" name="userStatus" :rules=" [{ required: true, message: '必填' }]">
        <ASelect v-model:value="state.formData.userStatus">
          <ASelectOption :value="1">在职</ASelectOption>
          <ASelectOption :value="0">离职</ASelectOption>
        </ASelect>
      </AFormItem>
    </AForm>
  </a-modal>
</template>
<script lang="ts" setup>
import { PageResult, ResponseVo, StoreTypes, UserTypes } from '../../../type';
import { reactive, ref, onMounted } from 'vue';
import UploadImage from '@/components/UploadImage/UploadImage.vue';
import { RoleService, StoreService, UserService } from '@/service';
import { message } from 'ant-design-vue';

const props = withDefaults(
  defineProps<{
    currentUser?: Partial<UserTypes.IUserItem>;
  }>(),
  {
    currentUser: (): Partial<UserTypes.IUserItem> => ({}),
  },
);

const formRef = ref();
const emit = defineEmits<{
  (e: 'ok'): void;
  (e: 'cancel'): void;
}>();

const state = reactive<{
  formData: Partial<UserTypes.IUserItem>;
  visible: boolean;
  stores: any[];
  roles: any[];
}>({
  formData: {},
  visible: true,
  stores: [],
  roles: [],
});

onMounted(() => {
  state.formData = { ...props.currentUser };
  getStores();
  getRoles();
});

const getStores = async () => {
  const res: ResponseVo<PageResult<StoreTypes.IStoreItem>> = await StoreService.pageStore({ ...{ pageNum: 1, pageSize: 999 } });
  if (res.code === 0) {
    state.stores = res.data.list;
  }
};

const getRoles = async () => {
  const res: ResponseVo<any> = await RoleService.pageRole({});
  if (res.code === 0) {
    state.roles = res.data;
  }
};

const handleOk = () => {
  formRef.value.validateFields().then(async (valid: boolean) => {
    if (valid) {
      let res: ResponseVo<any>;
      if (state.formData.userId) {
        res = await UserService.editUser(state.formData as UserTypes.IUserItem);
      } else {
        res = await UserService.addUser(state.formData as UserTypes.IUserItem);
      }
      if (res.code === 0) {
        message.success('操作成功！');
        emit('ok');
      }
    }
  });
};

const handleCancel = () => {
  emit('cancel');
};
</script>
